<template>
  <div>
    <setHeader :title="headerTitle"></setHeader>
    <div class="pagecontent">
        <!-- 个人头像 -->
        <!-- <div class="title_text_more main-people-img" prop="logImg">
          <h3>个人头像</h3>
          <el-upload
            class="avatar-uploaderTwo"
            :action="actionSheet"
            :show-file-list="false"
            :on-success="handleAvatarSuccessTwo"
            :before-upload="beforeAvatarUploadTwo">
            <img v-if="userhead" :src="userhead" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>         -->
        <camera headerimg="个人头像："></camera>
        <!-- 资料 -->
         <div class="infoDiv">
            <mt-field label="工作地区" v-model="region" disabled></mt-field>
            <mt-field label="电话号码" v-model="tel" :attr="{ maxlength: 11 }" disabled></mt-field>
            <mt-field label="电子邮箱" v-model="username" disabled></mt-field>
         </div>
    </div>
  </div>

<!-- <el-container  class="body">
        <el-header>
          <i class="el-icon-arrow-left" @click="pushIndex"></i>
            <h3>个人资料</h3>
            <el-button icon="el-icon-search" class="el-circle-index-search el-circle-index" round></el-button>
            <i class="el-icon-share"></i>
        </el-header>
        <el-header class="el-circle-index-header">
          <div class="el-circle-index-Introduction">
              <div class="el-circle-index-Introduction-top">
                <img src="http://js.wotucdn.com/framework/web/public/mainsite/images/wt-logo.png">
                <div class="el-circle-index-Introduction-top-center">
                  <h2>用户名字</h2>
                  <p>用户描述</p>
                  
                </div>
                 
              </div>
              <div class="el-circle-index-Introduction-bottom">
                <ul>
                  <li>1987</br>收藏</li>
                  <li>1987</br>卡劵</li>
                  <div class="clear"></div>
                </ul>
                 
              </div>

          </div>
        </el-header>
        <section style="margin-top: 40%;">
            <mt-cell title="个人头像">
              <mt-button :actions="actionSheet" ><img src="../common/images/logo3.png" height="100%" slot="icon"></mt-button>
            </mt-cell>
            <mt-actionsheet
                :actions= "arr"
                v-model="actionSheetarr">
            </mt-actionsheet>

            <mt-cell title="关联公司" value="中山环保科技公司" is-link></mt-cell>
            <mt-cell title="会员名" value="pengbing_2671" is-link></mt-cell>
            <mt-cell title="电话号码" value="135-3594-2321" is-link></mt-cell>

        </section>
</el-container> -->
  
</template>

<script>
import setHeader from '../public/setHeader.vue';
import camera from '../public/camera-bar';
  export default {
    data() {
      return {
        headerTitle: '个人资料',
        logining: false,
        ruleForm2: {
          name: '请输入圈子名称',
          checkPass: '',
        },
        // rules2: {
        //   account: [
        //     { required: true, message: '请输入账号', trigger: 'blur' },
        //     //{ validator: validaePass }
        //   ],
        //   validata: [
        //     { required: true, message: '请输入验证码', trigger: 'blur' },
        //     //{ validator: validaePass }
        //   ],
        //   checkPass: [
        //     { required: true, message: '请输入密码', trigger: 'blur' },
        //     //{ validator: validaePass2 }
        //   ]
        // },
        checked: true,
        // sheetVisible:false,
        // arr:[{
        //   name: '拍照',
        //   method : true // 调用methods中的函数
        // }],

        region:'中山环保科技公司',
        username:'pengbing_2671',
        tel:'135-3594-2321',
        logImgPath: '',
        userhead: this.$path+'',
        actionSheet:this.$path+'/api.php/upload/upimage',
      }
    },
    methods: {
      // 头像begin
      handleAvatarSuccessTwo(res, file) {
        this.logImgPath = res.headpath;
        this.userhead = URL.createObjectURL(file.raw);
        console.log(this.logImgPath);
      },
      beforeAvatarUploadTwo(file) {
        const isJPG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG && !isPNG) {
          this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
          return false;
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
          return false;
        }
      },
      handleReset2() {
        this.$refs.ruleForm2.resetFields();
      },
  //     actionSheet: function(){
  //       // 打开action sheet
  //       this.sheetVisible = true;
  //     },
  //     getCamera: function(){
  //       console.log("打开照相机")
  //     },
  //     getLibrary: function(){
  //       console.log("打开相册")
  //     },
      handleSubmit2(ev) {
        var _this = this;
        this.$refs.ruleForm2.validate((valid) => {
            if(valid){ 
              this.$fetch('/api/v2/movie/top250').then((response) => {
                // console.log(response)
              })
            } 
        });
      },
      pushIndex:function(){
        this.$router.push({path: "/"});
      }
    },
    components: {
      setHeader,
      camera
    }
  }

</script>
<style >


/* 资料 */
.infoDiv {
  margin-top: 0.2rem;
}
.infoDiv .mint-cell-text {
  font-size: 0.28rem;
  color: #333;
}
.infoDiv .mint-field-core {
  text-align: right;
  color: #666;
}


</style>
